

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/footer.css">
        <link rel="stylesheet" href="css/header.css">
        <link rel="stylesheet" href="css/shop/shop.css">
        <style>
                    body{
                        font-family: 楷体;
                        margin: 0;
                    }
                    #title{
                        top: 50px;
                        text-align: center;
                        font-weight: bold;
                        font-size: 52px;
                        width: 300px;
                        border: 1px solid black;
                        position: relative;
                        margin: 0 auto;
                        border-bottom-left-radius: 20px;
                        /*border-bottom-right-radius: 20px;*/
                        border-top-right-radius: 20px;
                        box-shadow: 5px 5px 4px black;
                    }
                    #title1{
                        top:400px;
                        text-align: center;
                        font-weight: bold;
                        font-size: 52px;
                        left: 600px;
                        width: 300px;
                        color: darkorange;
                        transform: rotateZ(25deg);
                        border-bottom: 1px solid black;
                        position: absolute;
                        margin: 0 auto;
                        z-index: 1000;
                        /*border-bottom-left-radius: 20px;*/
                        /*!*border-bottom-right-radius: 20px;*!*/
                        /*border-top-right-radius: 20px;*/
                        box-shadow: 5px 5px 4px black;
                    }
                    .product_shop{
                        position: relative;
                        width: 1400px;
                        height: 500px;
                        margin: 20px auto;
                        border-bottom-left-radius: 30px;
                        border-bottom-right-radius: 30px;
                        /*border: 1px solid black;*/
                        /*box-shadow: 0px 20px 10px black;*/
                    }
                    .product_shophead{
                        top: 50px;
                        position: relative;
                        width: 1400px;
                        height: 500px;
                        margin: 20px auto;
                        /*border-bottom-left-radius: 30px;*/
                        /*border-bottom-right-radius: 30px;*/
                        /*border: 1px solid black;*/
                        /*box-shadow: -10px 20px 10px black;*/
                        overflow: hidden;
                    }
                    .shop_1 {
                        top: 80px;
                        display: inline-block;
                        position: relative;
                        width: 300px;
                        height: 350px;
                        left: 5px;
                        /*border: 1px solid black;*/
                        margin: 20px 20px;
                        box-shadow: 10px 20px 10px black;
                        overflow: hidden;
                    }
                    .shop_1 img{
                        position: relative;
                        width: inherit;
                        height: 100%;
                        z-index: 100;
                        transition-duration: 3s;
                        /*animation-name: myimg;*/
                        /*animation-duration: 2s;*/
                        /*animation-iteration-count: 1;*/
                        /*animation-fill-mode:forwards;*/
                    }

                    .shop_1 img:hover{
                        transform: rotateY(180deg);
                    }
                    #divLimit{
                        position: relative;
                        width: 600px;
                        height: 100px;
                        /*background-color: black;*/
                        margin: 0 auto;
                    }
                    #divLimit ul{
                        position: relative;
                        list-style-type: none;
                        margin: 0 auto;
                        top: 50px;
                    }
                    #divLimit li{
                        position: relative;
                        float: left;
                        margin: auto 30px;
                    }
                    #divLimit a{
                        color: black;
                        font-size: 24px;
                        text-decoration: none;
                    }
                    #divLimit a:visited{
                        color: black;
                    }
                    #divLimit a:hover{
                        color: darkorange;
                    }
                    #divheader{
                        position: relative;
                        width: 750px;
                        height: 100px;
                        /*background-color: black;*/
                        margin: 0 auto;
                    }
                    #divheader ul{
                        position: relative;
                        list-style-type: none;
                        margin: 0 auto;
                        top: 100px;
                    }
                    #divheader li{
                        position: relative;
                        float: left;
                        margin: auto 30px;
                    }
                    #divheader a{
                        color: black;
                        font-size: 24px;
                        text-decoration: none;
                    }
                    #divheader a:visited{
                        color: black;
                    }
                    #divheader a:hover {
                        color: darkorange;
                    }
                    #divheader_v1,#divheader_v2{
                        display: inline-block;
                        /*background-color: black;*/
                        position: relative;
                        margin: 10px auto;
                        height: inherit;
                        overflow: hidden;
                    }
                    #divheader_v1
                    {
                        width: 600px;
                        margin-left: 100px;
                        margin-right: 80px;
                        float: left;
                    }
                    #divheader_v2{
                        width: 500px;
                        background-color: yellow;
                    }
                    #divheader_v1>div{
                        background-color: yellowgreen;
                        margin-top: 5px;
                        width: inherit;
                        height: 235px;
                    }
                    #divheader_v1 span{
                        position: relative;
                        display: inline-block;
                        width: 300px;
                        height: inherit;
                        background-color: #e8e8e8;
                        overflow: hidden;
                    }
                    .img_span img{
                        width: inherit;
                        height: inherit;
                        position: absolute;
                        transition-duration: 2s;
                        z-index: 100;

                    }

                    .img_span>img:hover {
                        transform: scale(1.1);
                        z-index: 9;
                        display: block;
                    }
                    .img_span a {
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        color: #FFF;
                        width: 554px;
                        height: inherit;
                        line-height: inherit;
                        background-color: rgba(0, 0, 0, .3);
                        z-index: 10;

                    }
                    .shop_1>button{
                        width: 90%;
                        position:absolute;
                        display: none;
                        height: 100px;
                        left: 10px;
                        top: -180px;
                        margin: 0 auto;
                        transition-duration: 2s;
                        transition: top 2s;
                        z-index: 10;
                    }

                    .shop_1:hover button{
                        background-color: black;
                        display: inline-block;
                        transform-style: flat;
                        animation-name: example;
                        animation-duration: 1s;
                        animation-delay: 2s;
                        /*z-index: -1;*/
                        animation-fill-mode:forwards;
                    }
                    @keyframes example {
                        from{
                            background-color: black;
                        }
                        to{
                            background-color: white;top: 0px;z-index: 1000;background-color: rgba(0,0,0,.8);
                        }
                    }

                  </style>
    </head>
    <body>
    <div id="header">
        <img class="i1" src="jp/捕获1.PNG" alt="">
        <div id="logo">
            <h1> <a  class="a2"  href="/index.html">A.S Hair Salon
            </a>
            </h1>
        </div>
        <div id="login_reg">
            <a  href="#" @click="fn1()">退出</a>
        </div>
    </div>
    <div id="mian">
        <div id="title">店内推荐</div>
        <div id="title1">店长推荐</div>
        <div id="divheader">
            <ul>
                <li><a href="#">全部</a></li>
                <li><a href="#">护发</a></li>
                <li><a href="#">洗发</a></li>
                <li><a href="#">烫发</a></li>
                <li><a href="#">染发</a></li>
                <li><a href="#">器械</a></li>
            </ul>
        </div>
        <div class="product_shophead">
            <div id="divheader_v1">
                <div><span class="img_span"><img src="yhf/图片21.jpg" alt=""><a>1</a></span><span><p></p></span></div>
                <div><span><p></p></span><span class="img_span"><img src="yhf/图片21.jpg" alt=""><a>1</a></span></div>
            </div>
            <div id="divheader_v2" class="img_span"><img src="yhf/图片21.jpg" alt=""><a>2</a></div>
        </div>
        <div class="product_shop">
            <div class="shop_1">
                <img src="yhf/图5.webp"/>
                <button></button>
            </div>
            <div class="shop_1"><img src="yhf/图5.webp"/><button></button></div>
            <div class="shop_1"><img src="yhf/图5.webp"/><button></button></div>
            <div class="shop_1"><img src="yhf/图5.webp"/><button></button></div>
        </div>
        <div class="product_shop">
            <div class="shop_1">
                <img src="yhf/图5.webp"/>
                <button></button>
            </div>
            <div class="shop_1"><img src="yhf/图5.webp"/><button></button></div>
            <div class="shop_1"><img src="yhf/图5.webp"/><button></button></div>
            <div class="shop_1"><img src="yhf/图5.webp"/><button></button></div>
        </div>
        <div class="product_shop">
            <div class="shop_1">
                <img src="yhf/图5.webp"/>
                <button></button>
            </div>
            <div class="shop_1"><img src="yhf/图5.webp"/><button></button></div>
            <div class="shop_1"><img src="yhf/图5.webp"/><button></button></div>
            <div class="shop_1"><img src="yhf/图5.webp"/><button></button></div>
        </div>
        <div id="divLimit">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">尾页</a></li>
            </ul>
        </div>
    </div>
    <div id="footer">
        <div class="foot_t">
            <div id="zuo_boby">
                <h2 id="ft_title">A.S Hair Salon</h2>
                <p>Lorem Ipsum is simply text the printing and<br>typesetting standard industry.
                    Onec Consequat<br> sapien ut cursus rhoncus. Nullam dui mi,<br> vulputate ac metus.
                </p>
                <h3>Trusted by<span style="color: orange">500+ People</span></h3>
                <img src="jp/微信.webp" alt="" class="tubiao">
                <img src="jp/qq.webp" alt="" class="tubiao">
            </div>
        </div>
        <div class="foot_t">
            <div id="mid_boby">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="manager/manager.html" class="lianjie">>>&nbspManager</a></li>
                    <li><a href="wdh/页面.html" class="lianjie">>>&nbspDesigner</a></li>
                    <li><a href="yhf/myproject.html" class="lianjie">>>&nbspPicture</a></li>
                    <li><a href="shop.html" class="lianjie">>>&nbspProduct</a></li>
                    <li><a href="ll/qwe.html" class="lianjie">>>&nbspContact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="foot_t">
            <div id="you_boby">
                <h4>Contact Info</h4>
                <p id="id1">地址:90 nsequursu dsdesdc, xxx Honey Street 049436.Newyork, NY.</p>
                <p id="id2">电话:+1(12) 123 456 789</p>
                <p id="id3">座机:+1(12) 123 456 789</p>
                <p><a href="" class="lianjie">邮箱:123456789@qq.com</a></p>
            </div>
        </div>
    </div>
    </div>
    </body>
    <script src="js/header.js"></script>
    </html>